<template>
	<view class="page">
		<view class="viewBox">
			<view class="line">
				我是<input class="user" type="text" placeholder="你谁啊你" v-model="data.username" />
			</view>
			<view class="line">
				我现在有余额<input class="user balance" type="text" placeholder="兜里有钱？" v-model="data.balance" />
			</view>
			<view class="line">
				规划一下每个月的收支好吧
			</view>
			<view class="line more">
				<view class="neo">
					预计收入：
					<input class="user" type="text" placeholder="→.→" v-model="data.exp_income" />
				</view>
				<view class="neo" style="color: #ca8622;">
					预计房租：
					<input class="user" type="text" placeholder="→.→" v-model="data.exp_rent" />
				</view>
				<view class="neo" style="color: #91c7ae;">
					预计水电：
					<input class="user" type="text" placeholder="→.→" v-model="data.exp_hyd" />
				</view>
				<view class="neo" style="color: #d48265;">
					预计吃喝：
					<input class="user" type="text" placeholder="→.→" v-model="data.exp_lunch" />
				</view>
				<view class="neo" style="color: #d2a6dd;">
					预计其他：
					<input class="user" type="text" placeholder="→.→" v-model="data.exp_other" />
				</view>
				<view class="neo">
					预计结余：
					<text v-if="exp_balance == '→.→'" style="color: #b2b2b2;">{{exp_balance}}</text>
					<text v-else>{{exp_balance}}</text>
				</view>
			</view>
			
			<u-button class="save" plain ripple size="medium" type="success" @click="saveUserData">保存</u-button>
		</view>
		
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
	var _mine
	export default {
		data() {
			return {
				data: {
					// 用户名
					username: '',
					// 余额
					balance: '',
					// 预计收入
					exp_income: '',
					// 预计结余
					exp_balance: '',
					// 预计房租
					exp_rent: '',
					// 预计水电
					exp_hyd: '',
					// 预计吃喝
					exp_lunch: '',
					// 预计其他
					exp_other: ''
				}
			}
		},
		computed: {
			exp_balance() {
				const {exp_income, exp_rent, exp_hyd, exp_lunch, exp_other} = this.data
				const num = exp_income - exp_rent - exp_hyd - exp_lunch - exp_other
				return num || '→.→'
			}
		},
		mounted() {
			_mine = this
			this.$get.getData().then(res => {
				const data = res.data.data
				this.data = data
			}).catch()
		},
		methods: {
			// 保存用户信息
			saveUserData: function() {
				let data = this.data
				const exp_balance = this.exp_balance
				if (exp_balance == '→.→') {
					data.exp_balance = ''
				}else{
					data.exp_balance = exp_balance
				}
				
				this.$post.saveUdata(data).then(res => {
					this.$refs.uToast.show({
						title: '保存成功',
						type: 'success'
					})
				}).catch(err=> {
					this.$refs.uToast.show({
						title: '保存失败！请稍后重试',
						type: 'error'
					})
				})
			}
		}
	}
</script>

<style scoped>
	.viewBox{
		width: 690rpx;
		box-sizing: border-box;
		box-shadow: 0 0 3px #007AFF;
		border-radius: 5px;
		padding: 0 30rpx;
		position: relative;
	}
	.save{
		position: absolute;
		top: 15rpx;
		right: 30rpx;
	}
	.line{
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		align-items: center;
	}
	.user{
		margin-left: 20rpx;
	}
	.more{
		display: flex;
		flex-wrap: wrap;
		height: 240rpx;
	}
	.neo{
		width: 50%;
		display: flex;
		align-items: center;
	}
	.neo input{
		/* flex: 1; */
		width: 150rpx;
	}
	.neo text{
		margin-left: 20rpx;
		width: 150rpx;
		overflow: hidden;
	}
	.balance{
		color: #FA3534;
	}
</style>
